<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>兮问听的音乐</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vue-router@4"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    
    body {
      background-color: #f5f5f5;
      color: #333;
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
    
    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: linear-gradient(135deg, #c62828 0%, #d84315 100%);
      color: white;
    }
    
    /* 页面容器 */
    .page-container {
      flex: 1;
      overflow-y: auto;
      padding-bottom: 80px;
      position: relative;
    }
    
    /* 底部播放控制栏 */
    .player-control-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70px;
      background: rgba(198, 40, 40, 0.95);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      padding: 0 15px;
      z-index: 100;
      max-width: 500px;
      margin: 0 auto;
      box-shadow: 0 -5px 15px rgba(198, 40, 40, 0.3);
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
    
    .player-info {
      flex: 1;
      overflow: hidden;
      color: white;
    }
    
    .song-name {
      font-size: 16px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .song-time {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 4px;
    }
    
    .control-buttons {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .control-btn {
      background: none;
      border: none;
      font-size: 20px;
      color: white;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    
    .control-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .play-btn {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      color: #c62828;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    
    /* 播放页面 */
    .player-page {
      padding: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .player-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .menu-btn, .back-btn {
      font-size: 24px;
      background: none;
      border: none;
      cursor: pointer;
      color: white;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    
    .menu-btn:hover, .back-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .page-title {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }
    
    .lyrics-container {
      flex: 1;
      height: 70%;
      overflow-y: auto;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      padding: 20px;
      backdrop-filter: blur(10px);
    }
    
    .lyrics {
      font-size: 18px;
      line-height: 2;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .no-lyrics {
      color: rgba(255, 255, 255, 0.7);
      font-size: 16px;
    }
    
    .progress-container {
      margin: 20px 0;
    }
    
    .progress-bar {
      width: 100%;
      height: 6px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
      position: relative;
      margin-bottom: 10px;
      cursor: pointer;
    }
    
    .progress {
      height: 100%;
      background: white;
      border-radius: 3px;
      width: 30%;
      position: relative;
    }
    
    .progress-handle {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: white;
      position: absolute;
      right: -8px;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    
    .time-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
    }
    
    .player-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      margin: 20px 0;
    }
    
    .player-controls .control-btn {
      font-size: 24px;
      color: white;
    }
    
    .player-controls .play-btn {
      width: 70px;
      height: 70px;
      font-size: 28px;
    }
    
    .play-mode {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }
    
    .mode-btn {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      font-size: 12px;
      color: white;
      padding: 8px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
    }
    
    .mode-btn.active {
      background: rgba(255, 255, 255, 0.9);
      color: #c62828;
      font-weight: bold;
    }
    
    /* 菜单页面 */
    .menu-page {
      padding: 20px;
      height: 100%;
      background: linear-gradient(135deg, #c62828 0%, #d84315 100%);
    }
    
    .menu-item {
      padding: 18px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
    }
    
    .menu-item:active {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding-left: 15px;
    }
    
    .menu-item:last-child {
      border-bottom: none;
    }
    
    /* 搜索页面 */
    .search-page {
      padding: 20px;
      height: 100%;
      background: linear-gradient(135deg, #c62828 0%, #d84315 100%);
    }
    
    .search-input {
      width: 100%;
      padding: 15px 20px;
      border: none;
      border-radius: 30px;
      font-size: 16px;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* 歌单页面 */
    .playlist-page {
      padding: 20px;
      height: 100%;
      background: linear-gradient(135deg, #c62828 0%, #d84315 100%);
    }
    
    .playlist-item {
      padding: 18px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      margin-bottom: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
      display: flex;
      align-items: center;
    }
    
    .playlist-item:active {
      transform: scale(0.98);
      background: rgba(255, 255, 255, 0.2);
    }
    
    .playlist-item::before {
      content: "♫";
      margin-right: 12px;
      font-size: 20px;
    }
    
    /* 歌曲列表页面 */
    .songlist-page {
      padding: 20px;
      height: 100%;
      background: linear-gradient(135deg, #c62828 0%, #d84315 100%);
    }
    
    .song-item {
      padding: 18px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      margin-bottom: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .song-item:active {
      transform: scale(0.98);
      background: rgba(255, 255, 255, 0.2);
    }
    
    .song-info {
      flex: 1;
    }
    
    .song-name {
      font-size: 16px;
      margin-bottom: 5px;
      color: white;
    }
    
    .song-artist {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
    }
    
    .loading {
      text-align: center;
      padding: 20px;
      color: rgba(255, 255, 255, 0.8);
    }
    
    .hidden {
      display: none;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .fade-in {
      animation: fadeIn 0.5s ease forwards;
    }
    
    /* 滚动条样式 */
    ::-webkit-scrollbar {
      width: 5px;
    }
    
    ::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { createApp, ref, computed, onMounted } = Vue;
    const { createRouter, createWebHashHistory } = VueRouter;
    import { defineStore } from 'pinia';
    
    // 模拟API调用
    const mockAPI = {
      // 查询歌单
      QueryPlayList: () => {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              playList: ["我的收藏", "流行热歌", "经典老歌", "轻音乐", "摇滚精选", "学习专注", "运动健身"]
            });
          }, 800);
        });
      },
      
      // 查询歌曲列表
      QuerySongList: (playlistName) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            const songs = {
              "我的收藏": [
                { song: "鸳鸯戏-邓寓君(等什么君)", artist: "邓寓君(等什么君)", songPath: "http://192.168.1.11:81/music seven/鸳鸯戏-邓寓君(等什么君).mp3", lrc: "为你弹奏肖邦的夜曲\n纪念我死去的爱情\n跟夜风一样的声音\n心碎的很好听" },
                { song: "七里香", artist: "周杰伦", songPath: "/songs/qilixiang.mp3", lrc: "窗外的麻雀在电线杆上多嘴\n你说这一句很有夏天的感觉\n手中的铅笔在纸上来来回回\n我用几行字形容你是我的谁" }
              ],
              "流行热歌": [
                { song: "孤勇者", artist: "陈奕迅", songPath: "/songs/guyongzhe.mp3", lrc: "爱你孤身走暗巷\n爱你不跪的模样\n爱你对峙过绝望\n不肯哭一场" },
                { song: "起风了", artist: "买辣椒也用券", songPath: "/songs/qifengle.mp3", lrc: "这一路上走走停停\n顺着少年漂流的痕迹\n迈出车站的前一刻\n竟有些犹豫" }
              ],
              "经典老歌": [
                { song: "月亮代表我的心", artist: "邓丽君", songPath: "/songs/yueliang.mp3", lrc: "你问我爱你有多深\n我爱你有几分\n我的情也真\n我的爱也真\n月亮代表我的心" },
                { song: "甜蜜蜜", artist: "邓丽君", songPath: "/songs/tianmimi.mp3", lrc: "甜蜜蜜你笑得甜蜜蜜\n好像花儿开在春风里\n开在春风里\n在哪里在哪里见过你\n你的笑容这样熟悉" }
              ],
              "轻音乐": [
                { song: "天空之城", artist: "久石让", songPath: "/songs/skycity.mp3", lrc: "" },
                { song: "梦中的婚礼", artist: "理查德·克莱德曼", songPath: "/songs/wedding.mp3", lrc: "" }
              ],
              "摇滚精选": [
                { song: "无地自容", artist: "黑豹乐队", songPath: "/songs/wudizirong.mp3", lrc: "人潮人海中\n有你有我\n相遇相识相互琢磨\n人潮人海中\n是你是我\n装作正派面带笑容" },
                { song: "海阔天空", artist: "Beyond", songPath: "/songs/haikuotiankong.mp3", lrc: "今天我寒夜里看雪飘过\n怀着冷却了的心窝漂远方\n风雨里追赶\n雾里分不清影踪\n天空海阔你与我\n可会变" }
              ],
              "学习专注": [
                { song: "Focus", artist: "Study Music", songPath: "/songs/focus.mp3", lrc: "" },
                { song: "Concentration", artist: "Brain Power", songPath: "/songs/concentration.mp3", lrc: "" }
              ],
              "运动健身": [
                { song: "Stronger", artist: "Kelly Clarkson", songPath: "/songs/stronger.mp3", lrc: "What doesn't kill you makes you stronger\nStand a little taller\nDoesn't mean I'm lonely when I'm alone" },
                { song: "Eye of the Tiger", artist: "Survivor", songPath: "/songs/eyeoftiger.mp3", lrc: "Rising up back on the street\nDid my time took my chances\nWent the distance now I'm back on my feet" }
              ]
            };
            
            resolve({
              songList: songs[playlistName] || []
            });
          }, 800);
        });
      }
    };
    
    // 播放模式枚举
    const PlayMode = {
      ORDER: 0,      // 顺序播放
      RANDOM: 1,     // 随机播放
      SINGLE: 2,     // 单曲循环
      LOOP: 3,       // 列表循环
      DISABLED: 4    // 禁用切换
    };
    
    // 创建路由
    const router = createRouter({
      history: createWebHashHistory(),
      routes: [
        { path: '/', component: { template: '<div class="fade-in" style="padding:20px;text-align:center;margin-top:50px;"><h2>欢迎使用朱红音乐</h2><p>点击底部播放栏开始享受音乐</p></div>' } },
        { path: '/player', component: { template: '<player-page></player-page>' } },
        { path: '/menu', component: { template: '<menu-page></menu-page>' } },
        { path: '/search', component: { template: '<search-page></search-page>' } },
        { path: '/playlist', component: { template: '<playlist-page></playlist-page>' } },
        { path: '/songlist/:playlist', component: { template: '<songlist-page></songlist-page>' } }
      ]
    });
    
    // 播放器控制栏组件
    const PlayerControlBar = {
      template: `
        <div class="player-control-bar fade-in">
          <div class="player-info" @click="goToPlayer" v-if="currentSong">
            <div class="song-name">{{ currentSong.song }}</div>
            <div class="song-time">{{ currentTime }} / {{ totalTime }}</div>
          </div>
          <div class="player-info" v-else>
            <div class="song-name">暂无播放</div>
            <div class="song-time">选择歌曲开始播放</div>
          </div>
          <div class="control-buttons" v-if="currentSong">
            <button class="control-btn" @click="prevSong">◀◀</button>
            <button class="control-btn play-btn" @click="togglePlay">
              {{ isPlaying ? '❚❚' : '▶' }}
            </button>
            <button class="control-btn" @click="nextSong">▶▶</button>
          </div>
        </div>
      `,
      setup() {
        const store = Vue.inject('store');
        const router = VueRouter.useRouter();
        
        const currentSong = computed(() => store.currentSong);
        const isPlaying = computed(() => store.isPlaying);
        const currentTime = computed(() => store.formatTime(store.currentTime));
        const totalTime = computed(() => store.formatTime(store.totalTime));
        
        const togglePlay = () => {
          store.togglePlay();
        };
        
        const prevSong = () => {
          store.prevSong();
        };
        
        const nextSong = () => {
          store.nextSong();
        };
        
        const goToPlayer = () => {
          if (store.currentSong) {
            router.push('/player');
          }
        };
        
        return {
          currentSong,
          isPlaying,
          currentTime,
          totalTime,
          togglePlay,
          prevSong,
          nextSong,
          goToPlayer
        };
      }
    };
    
    // 播放页面组件
    const PlayerPage = {
      template: `
        <div class="player-page fade-in">
          <div class="player-header">
            <button class="back-btn" @click="goBack">←</button>
            <div class="page-title">正在播放</div>
            <button class="menu-btn" @click="showMenu">☰</button>
          </div>
          
          <div class="lyrics-container">
            <div class="lyrics" v-if="currentSong && currentSong.lrc">
              <pre>{{ currentSong.lrc }}</pre>
            </div>
            <div class="no-lyrics" v-else-if="currentSong">
              暂无歌词
            </div>
            <div class="no-lyrics" v-else>
              暂无播放，请选择歌曲
            </div>
          </div>
          
          <div class="progress-container" v-if="currentSong">
            <div class="progress-bar" @click="seek">
              <div class="progress" :style="{ width: progressPercent + '%' }">
                <div class="progress-handle"></div>
              </div>
            </div>
            <div class="time-info">
              <span>{{ currentTime }}</span>
              <span>{{ totalTime }}</span>
            </div>
          </div>
          
          <div class="player-controls" v-if="currentSong">
            <button class="control-btn" @click="prevSong">◀◀</button>
            <button class="control-btn play-btn" @click="togglePlay">
              {{ isPlaying ? '❚❚' : '▶' }}
            </button>
            <button class="control-btn" @click="nextSong">▶▶</button>
          </div>
          
          <div class="play-mode" v-if="currentSong">
            <button 
              class="mode-btn" 
              :class="{ active: playMode === PlayMode.ORDER }"
              @click="changePlayMode(PlayMode.ORDER)"
            >
              顺序播放
            </button>
            <button 
              class="mode-btn" 
              :class="{ active: playMode === PlayMode.RANDOM }"
              @click="changePlayMode(PlayMode.RANDOM)"
            >
              随机播放
            </button>
            <button 
              class="mode-btn" 
              :class="{ active: playMode === PlayMode.SINGLE }"
              @click="changePlayMode(PlayMode.SINGLE)"
            >
              单曲循环
            </button>
            <button 
              class="mode-btn" 
              :class="{ active: playMode === PlayMode.LOOP }"
              @click="changePlayMode(PlayMode.LOOP)"
            >
              列表循环
            </button>
            <button 
              class="mode-btn" 
              :class="{ active: playMode === PlayMode.DISABLED }"
              @click="changePlayMode(PlayMode.DISABLED)"
            >
              禁用切换
            </button>
          </div>
        </div>
      `,
      setup() {
        const store = Vue.inject('store');
        const router = VueRouter.useRouter();
        
        const currentSong = computed(() => store.currentSong);
        const isPlaying = computed(() => store.isPlaying);
        const currentTime = computed(() => store.formatTime(store.currentTime));
        const totalTime = computed(() => store.formatTime(store.totalTime));
        const progressPercent = computed(() => {
          if (store.totalTime === 0) return 0;
          return (store.currentTime / store.totalTime) * 100;
        });
        const playMode = computed(() => store.playMode);
        
        const togglePlay = () => {
          store.togglePlay();
        };
        
        const prevSong = () => {
          store.prevSong();
        };
        
        const nextSong = () => {
          store.nextSong();
        };
        
        const changePlayMode = (mode) => {
          store.changePlayMode(mode);
        };
        
        const seek = (event) => {
          const progressBar = event.currentTarget;
          const clickPosition = event.offsetX;
          const progressBarWidth = progressBar.clientWidth;
          const percent = clickPosition / progressBarWidth;
          store.seek(percent);
        };
        
        const showMenu = () => {
          router.push('/menu');
        };
        
        const goBack = () => {
          router.back();
        };
        
        return {
          PlayMode,
          currentSong,
          isPlaying,
          currentTime,
          totalTime,
          progressPercent,
          playMode,
          togglePlay,
          prevSong,
          nextSong,
          changePlayMode,
          seek,
          showMenu,
          goBack
        };
      }
    };
    
    // 菜单页面组件
    const MenuPage = {
      template: `
        <div class="menu-page fade-in">
          <div class="player-header">
            <button class="back-btn" @click="goBack">←</button>
            <div class="page-title">菜单</div>
          </div>
          
          <div class="menu-item" @click="goToSearch">
            <span>🔍 搜索</span>
          </div>
          <div class="menu-item" @click="goToPlaylist">
            <span>📋 歌单</span>
          </div>
        </div>
      `,
      setup() {
        const router = VueRouter.useRouter();
        
        const goToSearch = () => {
          router.push('/search');
        };
        
        const goToPlaylist = () => {
          router.push('/playlist');
        };
        
        const goBack = () => {
          router.back();
        };
        
        return {
          goToSearch,
          goToPlaylist,
          goBack
        };
      }
    };
    
    // 搜索页面组件
    const SearchPage = {
      template: `
        <div class="search-page fade-in">
          <div class="player-header">
            <button class="back-btn" @click="goBack">←</button>
            <div class="page-title">搜索</div>
          </div>
          
          <input type="text" class="search-input" placeholder="搜索歌曲、歌手、专辑">
          <div style="text-align:center; margin-top:30px; color:rgba(255,255,255,0.7)">
            搜索功能开发中...
          </div>
        </div>
      `,
      setup() {
        const router = VueRouter.useRouter();
        
        const goBack = () => {
          router.back();
        };
        
        return {
          goBack
        };
      }
    };
    
    // 歌单页面组件
    const PlaylistPage = {
      template: `
        <div class="playlist-page fade-in">
          <div class="player-header">
            <button class="back-btn" @click="goBack">←</button>
            <div class="page-title">歌单</div>
          </div>
          
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else>
            <div 
              v-for="playlist in playlists" 
              :key="playlist" 
              class="playlist-item"
              @click="goToSongList(playlist)"
            >
              {{ playlist }}
            </div>
          </div>
        </div>
      `,
      setup() {
        const router = VueRouter.useRouter();
        const playlists = ref([]);
        const loading = ref(true);
        
        onMounted(async () => {
          try {
            const response = await mockAPI.QueryPlayList();
            playlists.value = response.playList;
          } catch (error) {
            console.error('获取歌单失败:', error);
          } finally {
            loading.value = false;
          }
        });
        
        const goToSongList = (playlistName) => {
          router.push(`/songlist/${playlistName}`);
        };
        
        const goBack = () => {
          router.back();
        };
        
        return {
          playlists,
          loading,
          goToSongList,
          goBack
        };
      }
    };
    
    // 歌曲列表页面组件
    const SonglistPage = {
      template: `
        <div class="songlist-page fade-in">
          <div class="player-header">
            <button class="back-btn" @click="goBack">←</button>
            <div class="page-title">{{ playlistName }}</div>
          </div>
          
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else-if="songs.length === 0" class="loading">此歌单暂无歌曲</div>
          <div v-else>
            <div 
              v-for="song in songs" 
              :key="song.song" 
              class="song-item"
              @click="playSong(song)"
            >
              <div class="song-info">
                <div class="song-name">{{ song.song }}</div>
                <div class="song-artist">{{ song.artist }}</div>
              </div>
              <div class="control-btn">▶</div>
            </div>
          </div>
        </div>
      `,
      setup() {
        const store = Vue.inject('store');
        const router = VueRouter.useRouter();
        const route = VueRouter.useRoute();
        
        const playlistName = ref(route.params.playlist);
        const songs = ref([]);
        const loading = ref(true);
        
        onMounted(async () => {
          try {
            const response = await mockAPI.QuerySongList(playlistName.value);
            songs.value = response.songList;
            // 将歌曲列表保存到store中
            store.setSongList(songs.value);
          } catch (error) {
            console.error('获取歌曲列表失败:', error);
          } finally {
            loading.value = false;
          }
        });
        
        const playSong = (song) => {
          store.playSong(song);
          router.push('/player');
        };
        
        const goBack = () => {
          router.back();
        };
        
        return {
          playlistName,
          songs,
          loading,
          playSong,
          goBack
        };
      }
    };
    
    // 创建应用
    const app = createApp({
      template: `
        <div id="app">
          <div class="page-container">
            <audio id="audioPlayer" controls></audio>
            <router-view></router-view>
          </div>
          <player-control-bar></player-control-bar>
        </div>
      `,
      components: {
        PlayerControlBar
      }
    });
    
    // 创建全局状态管理
    const store = {
      currentSong: null,
      isPlaying: false,
      currentTime: 0,
      totalTime: 240, // 默认4分钟
      playMode: PlayMode.ORDER,
      songList: [],
      currentIndex: -1,
      timer: null,
      
      playSong(song) {
        const res = fetch('/api/all/音阙诗听 _ 王梓钰 - 大雪.flac', {
          method: 'GET',
        }).then(response => {
          if (!response.ok) {
              throw new Error('Network response was not ok');
          }
          return response.blob(); // 获取二进制数据
        })
        .then(blob => {
          // 创建一个URL对象指向这个blob，这样就可以设置到audio元素的src属性上
          const audioUrl = URL.createObjectURL(blob);
          const audioPlayer = document.getElementById('audioPlayer');
          audioPlayer.src = audioUrl;
          audioPlayer.play();  // 播放音频
        })
        .catch(error => {
          console.error('There has been a problem with your fetch operation:', error);
        });
        this.currentSong = song;
        this.isPlaying = true;
        this.currentTime = 0;
        this.currentIndex = this.songList.findIndex(s => s.song === song.song);
        
        // 模拟播放进度更新
        if (this.timer) clearInterval(this.timer);
        this.timer = setInterval(() => {
          if (this.isPlaying && this.currentTime < this.totalTime) {
            this.currentTime += 1;
          } else if (this.currentTime >= this.totalTime) {
            if (this.playMode !== PlayMode.DISABLED) {
              this.nextSong();
            } else {
              this.isPlaying = false;
            }
          }
        }, 1000);
      },
      
      togglePlay() {
        console.log('---------------- 1 ----------------')
        console.log(this.isPlaying)
        this.isPlaying = !this.isPlaying;
      },
      
      prevSong() {
        if (this.songList.length === 0 || this.playMode === PlayMode.DISABLED) return;
        
        if (this.playMode === PlayMode.RANDOM) {
          this.currentIndex = Math.floor(Math.random() * this.songList.length);
        } else {
          this.currentIndex = (this.currentIndex - 1 + this.songList.length) % this.songList.length;
        }
        
        this.playSong(this.songList[this.currentIndex]);
      },
      
      nextSong() {
        if (this.songList.length === 0 || this.playMode === PlayMode.DISABLED) return;
        
        if (this.playMode === PlayMode.RANDOM) {
          this.currentIndex = Math.floor(Math.random() * this.songList.length);
        } else {
          this.currentIndex = (this.currentIndex + 1) % this.songList.length;
        }
        
        this.playSong(this.songList[this.currentIndex]);
      },
      
      changePlayMode(mode) {
        this.playMode = mode;
      },
      
      seek(percent) {
        this.currentTime = Math.floor(this.totalTime * percent);
      },
      
      setSongList(songs) {
        this.songList = songs;
      },
      
      formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
      }
    };
    
    // 注册组件
    app.component('PlayerPage', PlayerPage);
    app.component('MenuPage', MenuPage);
    app.component('SearchPage', SearchPage);
    app.component('PlaylistPage', PlaylistPage);
    app.component('SonglistPage', SonglistPage);
    
    // 提供全局状态
    app.provide('store', store);
    
    // 使用路由
    app.use(router);

    //创建一个Pinia实例,用于在应用中集中管理状态(store)
    const pinia = createPinia()
    app.use(pinia) //将Pinia实例注册到Vue应用中
    
    // 挂载应用
    app.mount('#app');
  </script>
</body>
</html>
